<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogShow"
      @close="closeHandler"
    >

      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="200px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch v-model="formData.enVisible" />
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit">提交</el-button>
          <el-button size="small" @click="dialogShow = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { addPermission, updatePermission } from '@/api/permission'

const defaultFormData = {
  formData: {
    enVisible: '',
    name: '',
    code: '',
    description: '',
    type: '', // 权限的类型 1菜单 2按钮
    pid: '' // 上一级的id ， 顶级是0
  }
}
export default {
  name: 'AddForm',
  data() {
    return {
      dialogShow: false,
      // 表单数据变量
      formData: { ...defaultFormData },
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改权限' : '新增权限'
    }
  },
  methods: {
    // 表单提交
    async onSubmit() {
      await this.$refs.form.validate()
      await addPermission(this.formData)
      this.$message.success('添加成功')
      // 列表更新
      this.$emit('updateList')
      this.dialogShow = false
    },
    // 关闭行为
    closeHandler() {
      // 清空表单
      this.formData = { ...defaultFormData }
    }
  }
}
</script>

<style>

</style>
